﻿<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
     </head>
     <style type="text/css">
          *{     padding: 0; margin: 0;       }
          html,body{
              height: 100%; width: 100%;
          }
          .graph {
              position: relative;   height: 0px;
              margin: 300px auto; border-top: solid 1px gainsboro;
          }
          .point{
              position: absolute; width: 1px; height: 1px; background: black;
          }
     </style>
     <body>
          <div id="graph" class="graph">
          </div>
     </body>
     <script type="text/javascript">
          var degree = 0;
          setInterval(function(){
              var radian = degree * (Math.PI/180);
              var div = document.createElement("div");
              div.className = "point";
              div.style.left = degree+"px";
              div.style.top = -100 * Math.sin(radian)+"px";
              graph.appendChild(div);
              degree += 1;
          },30);
     </script>
</html>
